<template>
  <div class="user_page">
    <!-- {{ user }} -->
    <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-item label="头像">
        <UpLoadCom
          :imgsrc="user.avatar"
          :disabled="!edit"
          @onUpload="onUpload"
        />
      </a-form-item>

      <a-form-item label="昵称">
        <a-input v-model:value="user.nickName" :disabled="!edit"></a-input>
      </a-form-item>

      <a-form-item label="密码">
        <a-input v-model:value="user.password" :disabled="!edit"></a-input>
      </a-form-item>

      <!-- <a-form-item label="手机号">
        <a-input v-model:value="user.phoneNumber" :disabled="!edit"></a-input>
      </a-form-item> -->

      <a-form-item label="姓名">
        <a-input v-model:value="user.userName" :disabled="!edit"></a-input>
      </a-form-item>

      <a-form-item></a-form-item>

      <a-form-item label=" " :colon="false">
        <div class="button_warpper">
          <template v-if="edit">
            <a-button type="primary" @click="handleSave">保存</a-button>
            <a-button @click="handleCancel">取消</a-button>
          </template>

          <template v-else>
            <a-button type="primary" @click="handleEdit">编辑</a-button>
          </template>
        </div>
      </a-form-item>
    </a-form>
  </div>
</template>
<script lang="ts">
import { User } from '@/model/login/User';
import UpLoadCom from '@/components/upload/UpLoadCom.vue';
import { defineComponent } from 'vue';
// imp
export default defineComponent({
  components: { UpLoadCom },
  props: {
    edit: { type: Boolean, default: false },
    user: { type: User, default: new User() },
  },
  emits: ['handleEdit', 'handleSave', 'handleCancel', 'onUpload'],
  setup(props, { emit }) {
    const handleEdit = () => {
      emit('handleEdit');
    };
    const handleSave = () => {
      emit('handleSave', props.user);
    };

    const handleCancel = () => {
      emit('handleCancel');
    };

    const onUpload = (value: string) => {
      emit('onUpload', value);
    };
    return {
      labelCol: { style: { width: '150px' } },
      wrapperCol: { span: 8 },
      handleEdit,
      handleSave,
      handleCancel,
      onUpload,
    };
  },
});
</script>
<style lang="less" scoped>
.user_page {
  border-radius: 8px;
  background-color: white;
  padding: 24px;
}
.button_warpper {
  display: flex;
  align-items: center;
  justify-content: center;
  button {
    margin: 0 12px 0 0;
  }
}
</style>
